<!DOCTYPE html>
<html ng-app="BootApplication">

<head>
	<meta http-equiv="Content-Type" content="Wordpress themetext/html; charset=UTF-8">	
	<title>AcquariumWeb</title>

	<!-- Behavioral Meta Data -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" type="image/png" href="img/small-logo-01.png">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,900,900italic,700italic,700,500italic,400italic,500,300italic,300' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

	<!-- Import plugin -->
	<jsp:include page="../core/head.jsp"></jsp:include>
</head>

<!-- CONTROLLER -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/plant/controller/det-plant-ctrl.js"></script>
<!-- SERVICE -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/plant/service/det-plant-srv.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/tank/service/my-tank-srv.js"></script>


<body ng-controller="DetPlantController">
	<!-- TOP-BAR -->
	<jsp:include page="../core/top-bar.jsp"></jsp:include>
	
	<!-- HEADER -->
	<div id="wrapper-header">
		<div id="main-header" class="object">
			<div class="logo logoTitle">{{'page.plant.title' | translate}}</div>
	        <div id="main_tip_search"> 
				<form>
					<input type="text" name="search" id="tip_search_input" list="search" autocomplete=off required>
				</form>
			</div>
	        <div id="stripes"></div>
	    </div>
	</div>

	<!-- NAV-BAR -->
	<jsp:include page="../core/nav-bar.jsp"></jsp:include>
	
	<!-- PORTFOLIO -->
	<div id="wrapper-container">
   		<div class="container object">
			<div id="main-container-image">
				<section class="work">
				
					<!------------------------------------>
					<!----- 	BUTTON RETURN 		------>
					<!------------------------------------>
					<div class="tab-return">
						<div id="dropdown-scrollable-container" style="height: 15em; overflow: auto;">
							<div id="dropdown-long-content">
					        	<div id="dropdown-hidden-container">
					          		<div class="btn-group">
							            <button id="btn-return" type="button" class="btn btn-secondary" href="<%=request.getContextPath()%>/tankCtrl/myTank?idTank={{tankId}}" 
							            		title="Ritorna indietro">
							            	Ritorna indietro
							           	</button>
					          		</div>
					        	</div>
					      	</div>
					    </div>
					</div>
					
					<!------------------------------------>
					<!----- 		FILTRO	 		------>
					<!------------------------------------>
					<div class="tab-filter">
						<div id="dropdown-scrollable-container" style="height: 15em; overflow: auto;">
							<div id="dropdown-long-content">
					        	<div id="dropdown-hidden-container">
					          		<div class="btn-group">
							            <button id="btn-filter-open" type="button" class="btn btn-secondary" ng-click="hideShowFilter()" 
							            		title="{{'page.plant.filter.moreFilter' | translate}}">
							            	{{'page.plant.filter.moreFilter' | translate}}
							           	</button>
					          		</div>
					        	</div>
					      	</div>
					    </div>
					</div>
					<div class="filter-content" ng-show="showFilter">
						<div class="col-md-12 sourceDiv">
							<div class="col-md-3">
								<label class="ng-binding">{{'page.plant.filter.name' | translate}}</label>
								<input type="text" ng-model="filtriAttivi.scientificName" placeholder="{{'page.plant.filter.ricercapernome' | translate}}" 
										class="form-control ng-pristine ng-valid ng-empty ng-touched" aria-invalid="false" style="">
							</div>
						</div>
						<div class="col-md-12 sourceDiv">
						
							<div class="col-md-3">
								<label class="ng-binding">Ph:</label>
								<div data-role="rangeslider">
									<label>min</label>
							        <input type="range" ng-model="filtriAttivi.phMin" name="phMin" value="0" min="0" max="50">
							        <label>max</label>
							        <input type="range" ng-model="filtriAttivi.phMax" name="phMax" value="0" min="0" max="50">
								</div>
							</div>
							
							<div class="col-md-3">
								<label class="ng-binding">Gh:</label>
								<div data-role="rangeslider">
									<label>min</label>
							        <input type="range" ng-model="filtriAttivi.ghMin" name="ghMin" value="0" min="0" max="50">
							        <label>max</label>
							        <input type="range" ng-model="filtriAttivi.ghMax" name="ghMax" value="0" min="0" max="50">
								</div>
							</div>
						</div>
						<div class="col-md-12 sourceDiv">
							<div class="col-md-3">
								<label class="ng-binding">Kh:</label>
								<div data-role="rangeslider">
									<label>min</label>
							        <input type="range" ng-model="filtriAttivi.khMin" name="khMin" value="0" min="0" max="50">
							        <label>max</label>
							        <input type="range" ng-model="filtriAttivi.khMax" name="khMax" value="0" min="0" max="50">
								</div>
							</div>	
							
							<div class="col-md-3">
								<label class="ng-binding">Temperature:</label>
								<div data-role="rangeslider">
									<label>min</label>
							        <input type="range" ng-model="filtriAttivi.temperatureMin" name="temperatureMin" value="0" min="0" max="50">
							        <label>max</label>
							        <input type="range" ng-model="filtriAttivi.temperatureMax" name="temperatureMax" value="0" min="0" max="50">
								</div>
							</div>	
						</div>	
						<div class="btn-group noAbs align-btn-center">
				            <button id="btn-filter-apply" type="button" class="ng-binding btn-primary" ng-click="activeFilter()" 
				            		title="Applica">
				            	Applica
				            </button>
				            <button id="btn-filter-apply" type="button" class="ng-binding btn-primary" ng-click="hideShowFilter()"
				            		title="Chiudi">
				            	Chiudi
				            </button>
		          		</div>
					</div>
					
					<!------------------------------------>
					<!----- 		ELENCO	 		------>
					<!------------------------------------>
					<div class="tab-content tab-plant">
					
						<!------------------------------------>
						<!----- ELENCO FILTRI ATTIVI	------>
						<!------------------------------------>
						<div ng-show="listFilter.length>0 && showBoxApplyFilter" style="width: 100%; float: left; height: auto; margin: 10px 5px 0px 5px;padding: 0px 0px 10px 0px;">
							<div style="background-color: black; padding: 5px 10px; float: left; border-radius: 5px; margin-right: 5px; color: white;">
								<span style="float: right; margin-left: 10px; font-weight: bold;">Filtri attivi:</span>
							</div>
							<div ng-repeat="filter in listFilter"  style="background-color: grey; padding: 5px 10px; float: left; border-radius: 5px; margin-right: 5px; color: white;">
								{{filter.value}}
								<span style="float: right; margin-left: 10px; font-weight: bold;" ng-click="removeFilter(filter)">X</span>
							</div>
						</div>
						
						<!------------------------------------>
						<!----- 	ELENCO FIGURE		------>
						<!------------------------------------>
						<div ng-show="plantList.length>0" class="figureTableDiv">
							<div ng-show="showFigure" id="ref-figure" class="figureClass">
								<!-- FIGURE VIEW -->
								<figure class="white" ng-repeat="plant in plantList">
									<div class="btnAddPlant">
										<button ng-click="saveLivestock(plant)" class="addPlant">+</button>
									</div>
									<div>
										<img src="{{plant.urlImage}}"/>
										<dl>
											<div class="btnAddPlant">
												<button ng-click="saveLivestock(plant)" class="addPlant">+</button>
											</div>
											<dt>{{plant.scientificName}}</dt>
											<dd>{{plant.description}}</dd>
										</dl>
									</div>
			                        <div class="wrapper-part-info figure-name" ng-click="activeDetailPlant($event, plant)">
			                           	<div class="part-info-image">{{'page.plant.figure.letter' | translate}}</div>
			                           	<div class="part-info">{{plant.scientificName}}</div>
									</div>
			                    </figure>
			                    <div class="paginator">
			                    	<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" ng-change="pageChanged()" class="pagination-sm" boundary-link-numbers="true"
			                    			previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;">></ul>
			                    </div>
							</div>
						</div>
						<!---------------------------->
						<!----- NESSUNA PIANTA	------>
						<!---------------------------->
						<div ng-show="plantList.length==0" class="noValue">
							<h3>Nessun Valore</h3>
						</div>
						
						<!---------------------------------------------->
						<!-----  VISUALIZZAZIONE DETTAGLIO PIANTA ------>
						<!---------------------------------------------->
						<div ng-show="showDetailPlant" id="ref-detailPlant" class="detailPlantClass">
							<!-- DETAIL TANK VIEW -->
							<div class="plant-image">
								<img src="{{plantModel.urlImage}}"/>
							</div>
							<div class="plant-resume">
								<div class="col-md-12 sourceDiv">
									<div class="col-md-6">
										<label class="ng-binding">Nome scientifico:</label>
										<span>{{plantModel.scientificName}}</span>
									</div>
								</div>
								<div class="col-md-12 sourceDiv">
									<div class="col-md-6">
										<label class="ng-binding">{{'page.plant.detail.description' | translate}}:</label>
										<span>{{plantModel.description}}</span>
									</div>
								</div>
							</div>
							<div class="btn-group noAbs align-btn-center">
					            <button id="btn-detail-cancel" type="button" class="ng-binding btn-primary" ng-click="deactiveDetailPlant($event)" 
					            		title="{{'page.my.tank.detail.btn.cancel' | translate}}">{{'page.my.tank.detail.btn.cancel' | translate}}</button>
			          		</div>
						</div>
					</div>
				</section>
			</div>	
		</div>
            
		<div id="wrapper-thank">
	    	<div class="thank">
	        	<div class="thank-text">Acquarium<span style="letter-spacing:-5px;">-</span>Web</div>
	    	</div>
		</div>

		<!-- MAIN-CONTAINER-FOOTER -->
		<jsp:include page="../core/main-container-footer.jsp"></jsp:include>
		    
	    <!-- WRAPPER-COPYRIGHT -->
	    <jsp:include page="../core/wrapper-copyright.jsp"></jsp:include>
	</div>

	<!-- SCRIPT -->	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.scrollTo.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.localScroll.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-animate-css-rotate-scale.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/fastclick.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.animate-colors-min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.animate-shadow-min.js"></script>    
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/main.js"></script>
</body>
</html>